Course Contents

Body properties

Editing body properties

Because a layout is in essence an HTML document, you might well want to edit the basic properties of this page. To save the trouble of opening the page, or its style sheet in another application to do this, Layout Master provides the Page Properties Editor for editing the page's background color, image and related properties.

To open the page properties editor

1a. choose Edit Page Properties in the Properties menu

or

1b. control click the page layout area of the Layout Window, then choose Edit Page Properties from the contextual menu which pops up

or

1c. click the page properties editor button Page Properties in the launcher

figure 4: the Page Properties Editor

figure 4: the Page Properties Editor

Use the various editors to edit the properties of the page.

Note that these properties are CSS based, and not attributes of the body element. This is because Layout Master produces xhtml or HTML 4.0 based code. With xhtml and HTML 4, presentational aspects of pages (like background images and colors) are suggested using CSS, not using element attributes.

The exception to this is the page title, which is of course the <title> element inside the <head> of the page.

The properties which can be edited are all of the most commonly used background properties: background color, and various background image properties.

Page background properties

Background color

Quite simply, the Background Color property specifies the color the page should have.

We will see color values a number of times throughout this manual. With CSS, colors may be specified in a number of different ways. In Appendix One, we discuss color values in detail.

Every time that color values need to be edited (for background and border properties for positioned elements, as well as for the body background) the color editor for doing so is the same. Hopefully you'll find it very intuitive, but for completeness, we discuss how the color chooser works in Appendix Two.

Background image

Pages can have background images, as specified by this property. Images can be in GIF, JPEG or PNG format.

To set this property, you use a URL chooser. We'll come across the URL chooser again for setting the background images of positioned elements. We discuss the URL chooser in detail in Appendix Two.

To set a background image value

1. use the URL chooser labeled url to enter the url of the image, or choose locate... to locate the image on your hard disk.

We discuss the intricacies of the background image property in Appendix Three.

Background repeat

Where background images are associated with the body of a page using the HTML background image attribute, when the background image is smaller than the width and or height of the page, browsers "tile" the image (that is repeat the image horizontally and vertically). With background images set using style sheets (as is the case with Layout Master) you can specify whether and how this should occur.

Background images can be made to repeat horizontally, vertically, in both directions, or not at all.

We discuss background repeat in detail in Appendix Three.

To set a background repeat value

1. simply use the popup menu labeled repeat to choose which value you want.

Background attachment

With background images set on the body of HTML documents, when the page is scrolled, the image scrolls too. With background images and CSS, you can specify that the background image should not scroll, but rather remain fixed as the page scrolls.

We discuss background attachment in detail in Appendix Three.

To set a background attachment value

1. simply use the popup menu labeled attachment to choose which value you want.

Background position

With a HTML based background image, the image is placed in the top left hand corner of the page, and tiles from there.

With CSS, we can specify where a background image is placed.

We discuss background position in detail in Appendix Three.

To set a background position value

1. set a horizontal position value using the editor labeled Horizontal in the Background Position part of the Page Properties Editor

2. you can also set a vertical background position value if a horizontal value has been set

next: positioned elements